<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : absolute</title>
        <style type="text/css">
            .outer {
                position: relative ; /* 相对定位 */
                border: 2px solid blue ; width: 400px ; height: 300px ; margin: 100px auto ;
            }
            .box {
                position: static ; /* 默认的 */
                border: 2px solid red ; width: 346px ; height: 246px ; margin: 25px ;
            }
            .inner {
                /* 相对于 当前元素的第一个非static定位的父元素进行定位 或 相对于浏览器窗口进行定位 */
                position: absolute ; /* 绝对定位 */
                right: 0 ;
                bottom: 0 ;
                border: 2px solid green ;
                width: 292px ;
                height: 192px ;
            }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="box">
                <div class="inner"></div>
            </div>
        </div>

    </body>
</html>